<template>
  <div>
    <Headline :headline1="$t('m.AccessAdmin')+'  /  '" :headline2="$t('m.TechnicalDates')" />
    <a-card style="width: 100%;">
      <a-button  type="primary" @click="youxiao" style="margin-left:20px;">{{$t('m.AuthorizationEffective')}}</a-button>
      <a-button  type="primary" @click="wuxiao" style="margin-left:20px;">{{$t('m.AuthorizationInvalid')}}</a-button>
      <a-button  type="primary" @click="clear" style="margin-left:20px;">{{$t('m.ClearAuthorization')}}</a-button>
    <a-calendar :value="value" @panelChange="panelChange" @select="selectDate">
      <ul slot="dateCellRender" slot-scope="value">
            <li v-for="item in getListData(value)" :key="item.dayname">
              <div>
                  <span v-if="item.daytype=='0'">{{$t('m.Invalid')}}</span>
                  <span v-if="item.daytype=='1'">{{$t('m.Effective')}}</span>
                </div>
            </li>
   </ul>
    </a-calendar>
    </a-card>
  </div>
</template>

<script>
import Calendar from 'vue-calendar-component';
import Headline from "@/components/Headline";
import {getDayList,setDayType,deleteSet} from '@/api/entrance/cloudDoor'
export default {
  name: "Specialdate",
  components: { Headline,
   "full-calendar": require("vue-fullcalendar"),
   Calendar
    },
  data() {
    return {
      value: this.$moment(new Date()),
        chooseDay:[],
        beforeMonth:'',
        afterMonth:'',
        selectDateValue: [],
        dataList: [
      ],
    };
  },
   computed: {
    
   },
  created(){
    this.beforeMonth = this.$moment(new Date()).subtract(1,'months').format('YYYY-MM-DD');
    this.afterMonth = this.$moment(new Date()).add(1,'months').format('YYYY-MM-DD');
    this._getDayList()
  },
  methods: {
    clear(){
      deleteSet({days:JSON.stringify(this.selectDateValue)})
      .then(res => {
        if (res.data.success == true) {
          this._getDayList()
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
      })
      .catch(err => {
        this.$message.error("操作失败");
      })
    },
    getListData (value) {
      var listData = []
      this.dataList.forEach(e => {
        if (e.dayname === value.format('YYYY-MM-DD')) {
          listData.push(e)
        }
      })
      return listData
    },
    panelChange (value) {
      this.value = value
      this.beforeMonth = this.$moment(value).subtract(1,'months').format('YYYY-MM-DD');
    this.afterMonth = this.$moment(value).add(1,'months').format('YYYY-MM-DD');
    this._getDayList()
      console.log(value)
    },
    selectDate (value) {
      this.value = value
      this.selectDateValue = []
      this.selectDateValue.push(this.$moment(value).format('YYYY-MM-DD'))
      console.log(this.selectDateValue)
    },


    _getDayList(){
      getDayList({params:{start:this.beforeMonth,end:this.afterMonth}})
    .then(res => {
      this.dataList = res.data.data
      console.log(res.data.data)
    })
    },
    wuxiao(){
      if(this.selectDateValue.length <=0) return this.$message.warning('请选则日期')
      setDayType({days:JSON.stringify(this.selectDateValue),dayType:0})
      .then(res => {
        if (res.data.success == true) {
          this._getDayList()
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
      })
      .catch(err => {
        this.$message.error("操作失败");
      })
      this.selectDateValue = []
    },
    youxiao(){
      if(this.selectDateValue.length <=0) return this.$message.warning('请选则日期')
      setDayType({days:JSON.stringify(this.selectDateValue),dayType:1})
      .then(res => {
        if (res.data.success == true) {
          this._getDayList()
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
      })
      .catch(err => {
        this.$message.error("操作失败");
      })
      this.selectDateValue = []
    },

  },
};
</script>

<style lang="scss" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
